<template>
  <div class="w-full">
    <SelectRoot class="w-full" v-model="model">
      <SelectTrigger
        class="flex w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 shadow-sm focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-gray-400"
      >
        <SelectValue placeholder="Select a Framework" />
        <Icon icon="material-symbols:keyboard-arrow-down" class="h-5 w-5"></Icon>
      </SelectTrigger>
      <SelectPortal>
        <SelectContent class="bg-white shadow-sm border rounded-md z-[100]">
          <SelectViewport class="p-2">
            <div v-for="provider in items" :key="provider.id">
              <SelectLabel class="flex items-center px-6 h-7 text-gray-500">
                <img :src="provider.avatar" class="h-5 w-5 rounded mr-2" />
                {{ provider.title }}
              </SelectLabel>
              <SelectGroup v-for="(item, index) in provider.models" :key="index">
                <SelectItem
                  :value="`${provider.id}/${item}`"
                  class="relative outline-none rounded flex items-center h-7 px-6 text-green-700 cursor-pointer data-[highlighted]:text-white data-[highlighted]:bg-green-700"
                >
                  <SelectItemIndicator class="h-4 w-4 absolute left-0 mr-2">
                    <Icon icon="material-symbols:check" class="h-5 w-5 text-gray-500"></Icon>
                  </SelectItemIndicator>
                  <SelectItemText>{{ item }}</SelectItemText>
                </SelectItem>
              </SelectGroup>
              <SelectSeparator class="h-[1px] bg-gray-300 my-2" />
            </div>
          </SelectViewport>
        </SelectContent>
      </SelectPortal>
    </SelectRoot>
  </div>
</template>

<script setup lang="ts">
  import {
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectItemIndicator,
    SelectLabel,
    SelectPortal,
    SelectRoot,
    SelectSeparator,
    SelectTrigger,
    SelectValue,
    SelectViewport,
    SelectItemText
  } from 'radix-vue'
  import type { ProviderSelectProps } from '../type'

  defineProps<{
    items: ProviderSelectProps[]
  }>()

  const model = defineModel<string>()
</script>

<style scoped></style>
